<template>
    <view class="listBox">
        <view class="s-item" v-for="item,idx in selectArr" :key="idx" :class="{'active':activeIdx == idx}"   :style=" activeIdx == idx ? 'color:'+themeJson.color :'' "  @click="swicthActive(idx)">
            <text>{{ item.name }}</text> 
            <text class="arrow-box">
                <text class="arrow top"></text>
                <text class="arrow"></text>
            </text>
        </view>
        <!--  -->
        <view class="show-box top" v-show=" activeIdx >= 0" @click="closeShow">
            <scroll-view scroll-y="true" class="show-content" @click.stop="doThis">

                <!-- //类别选项 -->
                <view class="cateBox" v-show="activeIdx == 0">
                    <view v-for="item,idx in cate45Arr" :key="item.id" class="li text-delic" @click.stop=" selcectFunc('cateChecked',idx ,'multiple') " >
                        <view :class="{'active': cateChecked.includes(idx) }" class="text">
                            <text>{{item.cateNum}}-{{item.tradeName}}</text>
                        </view>
                    </view>
                </view>
                <!-- 结构 -->
                <view class="cateBox" v-show="activeIdx == 1">
                    <view v-for="item,idx in structureArr" :key="item.id" class="li text-delic" @click.stop=" selcectFunc('structureChecked',idx,'multiple') " >
                        <view :class="{'active': structureChecked.includes(idx) }" class="text">
                            <text>{{item.key}}</text>
                        </view>
                    </view>
                </view>
                <!-- 价格 -->
                <view class="cateBox" v-show="activeIdx == 2">
                    <view v-for="item,idx in priceArr" :key="item.id" class="li text-delic"  @click.stop=" selcectFunc('priceChecked',idx) " >
                        <view :class="{'active': priceChecked == idx }" class="text">
                            <text>{{item.key}}</text>
                        </view>
                    </view>

                    <view class="slider">
                        <view class="tit">
                            <text>自定义价格</text>
                        </view>
                        <view class="slider-con">
                            <view class="tit-min">
                                <text v-show="showValue.max"> {{showValue.min}} - {{showValue.max}} 万元</text>
                            </view>
                           
                        </view>
                    </view>
                      
                </view>
                <!-- 长度 -->
                <view class="cateBox" v-show="activeIdx == 3">
                    <view v-for="item,idx in textLengthArr" :key="item.id" class="li text-delic" @click.stop=" selcectFunc('textLengChecked',idx) ">
                        <view :class="{'active': textLengChecked == idx }" class="text">
                            <text>{{item.key}}</text>
                        </view>
                    </view>
                </view>
                <!-- 排序 -->
                <view class="cateBox" v-show="activeIdx == 4">
                    <view v-for="item,idx in sortArr" :key="item.id" class="li text-delic" @click.stop=" selcectFunc('sortIdx',idx) ">
                        <view :class="{'active': sortIdx == idx }" class="text">
                            <text>{{item.name}}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class='mask-btns'>
                <view class='btn' @click.stop="restNowMode">重置</view>
                <view class='btn sure' @click.stop="goSearch"  :style="'background-color:'+themeJson.color" >确定</view>
            </view>
            <!-- <view class="last-box" @touchmove.stop.prevent="moveHandle">
                    
                </view> -->

        </view>
    </view>

</template>

<script>

export default {
    components:{
    },
    props: ['cate45Arr','themeJson'],
    data () {
        return {
            key: 'tm',
            //条件选项
            selectArr: [{ name: "综合", key:undefined }, { name: "销量", key: "saleNum" }, { name: "价格", key: "salePrice" }, { name: "分类", key: "classify" },
            ],
            activeIdx: -1,
            //类别选项 存的是下标
            cateChecked: [],
            //结构
            structureArr: [],
            structureChecked: [],
            //价格
            priceArr: [],
            priceChecked: -1,
            showValue: {},
            //长度
            textLengthArr: [],
            textLengChecked: -1,
            //排序
            sortArr: [
                // { 'name': '默认排序', 'orderBy': 1, 'orderByWay': undefined },
                { 'name': '按市场价从低到高', 'orderBy': 2, 'orderByWay': 1 },
                { 'name': '按市场价从高到低', 'orderBy': 2, 'orderByWay': 2 },
                { 'name': '按上架时间从早到晚', 'orderBy': 3, 'orderByWay': 1 },
                { 'name': '按上架时间从晚到早', 'orderBy': 3, 'orderByWay': 2 },
                { 'name': '按注册时间从早到晚', 'orderBy': 4, 'orderByWay': 1 },
                { 'name': '按注册时间从晚到早', 'orderBy': 4, 'orderByWay': 2 },
                { 'name': '按点击率从低到高', 'orderBy': 5, 'orderByWay': 1 },
                { 'name': '按点击率从高到低', 'orderBy': 5, 'orderByWay': 2 },
            ],
            sortIdx: -1,
        }
    },
    computed: {
    },
    mounted () {

        // this.initSelectOpt()

       

    },
    methods: {
        //初始化选项
        initSelectOpt () {

            this.qmxDataKey()
                .then(res => {
                    //长度
                    this.textLengthArr = res['trademarkWordNumEnumList']
                    //价格
                    this.priceArr = res['sellPriceTypeEnumList']
                    //商标结构
                    this.structureArr = res['trademarkStructureEnumList']

                    // console.log('字典',this.structureArr)

                })
                .catch(error => {
                    console.log('报错了', error)

                })

        },
        swicthActive (idx) {

            this.activeIdx = this.activeIdx == idx ? -1 : idx

            this.$refs['qSlider'].initFunc()
        },
        doThis () {

        },
        closeShow () {
            this.activeIdx = -1
        },
        //选择
        selcectFunc (key, val ,type) {

            if (type == 'multiple' ) {

                let index = this[key].indexOf(val)

                if (index != -1) {
                    this[key].splice(index, 1)

                }
                else {

                    this[key].push(val)
   
                }

            }
            else {

                this[key] = this[key] == val ? -1 : val

            }

            if( key == 'priceChecked' && this.showValue?.max){
                this.showValue = {}
                this.$refs['qSlider'].restFunc()
                // reset
            }


        },
        sliderChange( e ){
         
            this.priceChecked = -1
            this.showValue = e
        },
        //去查询
        goSearch(){


            let params ={
                internationalClass: this.cateChecked.length > 0 ?  (this.cateChecked.map( i =>  i-1+2 ).join(';')+';' ) : '',
                trademarkStructureList: this.structureChecked.map( i =>  this.structureArr[i].value ),
                sellPriceType: this.priceChecked == -1 ? '' :  this.priceArr[this.priceChecked].value,
                trademarkWordNum: this.textLengChecked == -1 ? '' :  this.textLengthArr[this.textLengChecked].value,
            }
            if( this.sortIdx >= 0 ){
                params.orderBy = this.sortArr[ this.sortIdx].orderBy
                params.orderByWay = this.sortArr[ this.sortIdx].orderByWay
            }

            //有区间价格
            if( this.showValue?.max ){
                params.sellPriceMax = this.showValue.max  *10000
                params.sellPriceMin  = (this.showValue?.min || 0) *10000
            }
            else{
                params.sellPriceMax = undefined
                params.sellPriceMin = undefined
            }

            //是否多类
            params.isSameNameMoreType = this.cateChecked.length > 1 ? 1 : undefined

        
            console.log('最后的数据',params )  

            this.$emit('selectFinish',params)

            this.closeShow()
        },
        restNowMode(){

            let key = 'cateChecked',
                type ='multiple' ;

            switch( this.activeIdx ){

                case 0 : key = 'cateChecked' ; break;
                case 1 : key = 'structureChecked' ; break;
                case 2 : key = 'priceChecked'  ; type = null ; break;
                case 3 : key = 'textLengChecked' ; type = null ;break;
                case 4 : key = 'sortIdx' ; type = null ; break;

            }

            if(key == 'priceChecked'){

                this.showValue = {}
                this.$refs['qSlider'].restFunc()
            }

            if( type =='multiple' ){

                this[key] = []
            }
            else{
                this[key] = -1
            }

        },
        //获取数据字典
        qmxListData () {

            return this.$axios({ url: 'common/get/enums' })
                .then(res => {

                    this.Junstroge.set('dictData', res.data)
                    return res.data
                })

        },
        //获取数据字典Key
        qmxDataKey (key) {

            return new Promise((resolve) => {

                let dataObj = this.Junstroge.get('dictData')

                if (dataObj && dataObj != 'undefined') {

                    if (key) {
                        resolve(dataObj[key])
                    }
                    else {
                        resolve(dataObj)
                    }
                }
                else {
                    this.qmxListData().then(res => {
                        if (key) {
                            resolve(res[key])
                        }
                        else {
                            resolve(res)
                        }
                    })
                }
            })

        },

        //禁止蒙层下面滚动
        moveHandle () { }


    }
}
</script>

<style scoped lang="scss">
.listBox {
    width: 100%;
    display: flex;
    height: 46px;
    background: #fff;
    position: relative;
    border-bottom: 2px solid #f8f8f8;
    .s-item {
        flex: 1;
        padding: 0rpx 10rpx;
        text-align: center;
        color: #333;
        font-size: 30rpx;
        line-height: 44px;
        &.active {
            color: #1287fa;
            .arrow-box {
                transform: rotate(180deg);
                transform-origin: center center;
            }
        }
    }
    .arrow-box {
        display: inline-block;
        transition: all 0.2s;
    }
    .arrow {
        display: inline-block;
        position: relative;
        // margin-left: 10rpx;
        border: 3px solid;
        border-color: transparent transparent currentColor currentColor;
        transform: rotate(-45deg);
        opacity: 0.4;
        content: "";
        top: -1px;
        &.top{
            top: -4px;
            border-color: currentColor currentColor transparent transparent;
            transform: rotate(-45deg);
            left: 6px;
        }
    }
    .show-box {
        position: absolute;
        width: 100%;
        height: calc(100vh - 96px);
        top: 34px;
        left: 0;
        z-index: 10;
        background: rgba(0, 0, 0, 0.2);
        .show-content {
            background: #fff;
            height: 50%;
            width: 100%;
            overflow-y: auto;
        }
        .last-box {
            height: 50%;
        }
        .cateBox {
            padding: 10rpx 20rpx 10rpx;
        }
        .li {
            display: inline-block;
            vertical-align: top;
            width: 50%;
            padding: 0rpx 0 0rpx 20rpx;
            margin: 6rpx 0;
            line-height: 1.5;
            font-size: 26rpx;
            &.long {
                width: 100%;
            }
            .text{
                padding: 4rpx 20rpx;
                height: 100%;
                border: 4px;
                display: inline-block;
                &.active{
                color:#1287fa;
                background: #e7f4ff;
            }
            }
           
        }
        .slider{
            margin-top: 50rpx;
            .tit{
                color: #000;
                font-size: 28rpx;
            }
            .tit-min{
                text-align: center;
                font-weight: bold;
                font-size: 26rpx;
                margin-bottom: 20rpx;
                color:#eaa319;
                height: 30rpx;
            }
            .slider-con{
                width: 65%;
                margin: auto;
            }

        }
    }
}
// 按钮
.mask-btns {
    border-top: 1px solid #f8f8f8;
    background-color: #fff;
    padding: 20rpx;
    display: flex;
    justify-content: space-around;
}
.mask-btns .btn {
    padding: 0;
    height: 72rpx;
    text-align: center;
    line-height: 68rpx;
    border: 1px solid #f8f8f8;
    width: 40%;
    border-radius: 30px;
    color: #888;
}
.mask-btns .btn.sure {
    background-color: #1287fa;
    color: #fff;
    border-color: currentColor;
}
</style>
